<template>
    <div class="container">
        <!-- 商品列表 -->
        <h2 style="margin-left: 700px">门店商品</h2>

        <el-main>
            <el-row>
                <el-col :span="6" v-for="product in products" :key="product.id">
                    <el-card class="product-card">
                        <img :src="product.itemImg" class="product-image" alt="product.name">
                        <div class="product-info">
                            <span class="product-name">{{ product.itemName }}</span>
                            <span class="product-price">￥{{ product.price }}</span>
                        </div>
                    </el-card>

                </el-col>
            </el-row>
        </el-main>

        <!-- 底部总计 -->
        <el-footer class="footer">
            <el-button type="primary" @click="list()" style="margin-left: 700px">上架商品</el-button>
        </el-footer>


    </div>
</template>

<script setup>
import {onMounted, ref} from 'vue';
import {getItemListByItemId} from "@/api/item";
import {useRoute} from "vue-router";
import {getItemByShopId} from "@/api/shop";
import {createOrder} from "@/api/order";
import {ElMessage} from "element-plus";
import {createLineItem} from "@/api/item";
import {findCustomerOrder} from "@/api/order";
import router from "@/router";


const products = ref([]);
const itemIds=ref([])
const route=useRoute()
const shopId=ref("")

onMounted(async () => {
    shopId.value=route.query.shopId
    let result1=await getItemByShopId(shopId.value)
    itemIds.value=result1.data
    let result = await getItemListByItemId(itemIds.value)
    products.value = result.data.map(product => ({
        ...product,
        quantity: 0
    }));
})

function list(){
    let id=shopId.value
    router.push({path:'listItem',query:{shopId:id}})
}
</script>

<style>
.container {
    padding: 20px;
}

.product-card {
    margin: 10px;
    position: relative;
}

.product-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.product-info {
    display: flex;
    justify-content: space-between;
    padding: 10px;
}

.product-name {
    font-size: 18px;
}

.product-price {
    font-size: 16px;
}

.product-actions {
    position: absolute;
    bottom: 5px;
    right: 10px;
}

.footer {
    display: flex;
    padding: 5px;
}
</style>
